<template>
  <div class="dashborad-head">
    <a-row>
      <a-col :span="18">
        <div class="auto-input">
          <span>{{ text }}</span>
          <input v-model="text" />
        </div>
      </a-col>
      <a-col :span="6">
        <div class="head-right">
          <a-tooltip>
            <template #title>添加图表</template>
            <PlusCircleFilled class="add-chart" @click="add" />
          </a-tooltip>
        </div>
      </a-col>
    </a-row>
    <KanbanAddModule ref="kanbanAddModule" />
  </div>
</template>
<script>
  import { PlusCircleFilled } from '@ant-design/icons-vue';
  import KanbanAddModule from './kanbanAddModule.vue';

  export default {
    components: { PlusCircleFilled, KanbanAddModule },
    props: {
      title: {
        type: String,
      },
      describe: {
        type: String,
      },
    },
    data() {
      return {
        text: '',
      };
    },
    created() {
      this.text = this.title;
    },
    methods: {
      add() {
        this.$refs.kanbanAddModule.showDrawer();
      },
    },
  };
</script>
<style lang="scss">
  .dashborad-head {
    padding: 20px 10px 5px;
    .auto-input {
      height: 28px;
      position: relative;
      display: inline-block;
      min-width: 200px;
      max-width: 500px;
      span,
      input {
        font-size: 20px;
        height: 100%;
        font-weight: 500;
        padding: 0 5px;
      }
      span {
        line-height: 28px;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        visibility: hidden;
      }
      input {
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        border: 0;
        outline: none;
        background-color: #fff0;
        &:hover {
          background-color: #eee;
        }
      }
    }
    .head-right {
      text-align: right;
      padding-right: 10px;
      .add-chart {
        font-size: 26px;
        color: $color;
        cursor: pointer;
      }
    }
  }
</style>
